Ext.define('Era.view.MainContainer',{
    extend: 'Ext.container.Viewport',
    layout: 'hbox',
    autoHeight: true,
    style: {
        border: '1px solid black',
        height: '50px'
    },
    
    initComponent: function() {
       
        this.components = {};
       
        // create container for events that are running
        this.components['startedBox'] = Ext.create('Era.view.EventsContainer',{
            width: 200,
            cls: 'bar separator_right',
            items: [
                {
                    xtype: 'container',
                    layout: 'fit',
                    height: 48,
                    margin: '0 0 0 35',
                    
                    items: [{   
                        xtype: 'button',
                        text: '',
                        width: 48,
                        cls: 'timer',
                        listeners: {
                            mouseover: function(component) {
                                Era.controller.Main.showEvents(component,{max: new Date()});
                            },
                            mouseout: function() {
                                Era.controller.Main.hideEvents(500);
                            }
                        }
                    }]
                }
            ]
        });
        
        // create container for events that are in the future
        this.components['incomingBox'] = Ext.create('Era.view.EventsContainer',{
            cls: 'bar',
            flex: 1
        });
       
        // create container for menu panel and high priority box
        this.components['menuBox'] = Ext.create('Era.view.EventsContainer',{
            width: 200,
            cls: 'bar',
            items: [
                {
                    xtype: 'container',
                    layout: 'fit',
                    height: 48,
                    margin: '0 0 0 35',
                    items: [{   
                        xtype: 'button',
                        text: '',
                        cls: 'high_priority',
                        width: 48,
                        listeners: {
                            mouseover: function(component) {
                                Era.controller.Main.showEvents(component,{priority: true});
                            },
                            mouseout: function() {
                                Era.controller.Main.hideEvents(500);
                            }
                        }
                    }]
                },
                {
                    xtype: 'container',
                    layout: 'fit',
                    height: 48,
                    margin: '0 0 0 15',
                    items: [{   
                        xtype: 'button',
                        text: '',
                        cls: 'config128',
                        width: 48,
                        handler: function() {
                            
                            var screen = Ext.create('Era.view.InfoScreen');
                            //var screen = Ext.create('Era.view.EventsContainer');
                            Era.controller.Main.showMenuScreen(screen,true);
                            //Era.controller.Main.showMenuWindow();
                        }
                    }]
                }
            ]   
        });
     
        this.items = [
            this.components['startedBox'],
            this.components['incomingBox'],
            this.components['menuBox']
        ]
        
        this.callParent(this);
    },
    
    getComponent: function(name) {
        return this.components[name];
    }
    
});

